﻿@using Page = viBook.Models.Page
@model Page
<script type="text/javascript">
    function Picture(id, src, tagCollection) {
        return {
            id: id,
            src: ko.observable(src),
            tagCollection: ko.observableArray(tagCollection),
            onRenderTagCompleted: function (elements) {
              
            }
        };
    }

    function Tag(top, left, width, height, content) {
        return {
            top: ko.observable(top + 'px'),
            left: ko.observable(left + 'px'),
            hoverLeft: ko.observable((left + width) + 'px'),
            width: ko.observable(width + 'px'),
            height: ko.observable(height + 'px'),
            content: ko.observable(content)
        };
    }
    var initialPicture = new Picture(0, "../../Content/nop_598_sleepyfans.01.jpg",null);
    var viewmodel = {
        picture: ko.observable(initialPicture),
        fetchNextPicture: function () {
            $.ajax({
                url: '@Url.Action("FetchNextCommentPage", "Comments")',
                type: 'POST',
                data: ko.toJSON({ chapterId: viewmodel.chapterId, pageNumber: viewmodel.commentPageNo() + 1 }),
                contentType: 'APPLICATION/JSON',
                success: function (result) {
                    if (result.isSuccess) {
                        var listComment = [];
                        $(result.comments).each(function (index, item) {
                            listComment[index] = new Comment(item.id, item.username, item.content, item.createdDate, item.vote, item.isVotedUp, item.isVotedDown, item.isReported);
                        });
                        viewmodel.commentCollection(listComment);
                        viewmodel.commentPageNo(viewmodel.commentPageNo() + 1);
                        viewmodel.isDisablePrevBtn(viewmodel.commentPageNo() == 1);
                        viewmodel.isDisableNextBtn(viewmodel.commentPageNo() == viewmodel.totalCommentPage());
                    } else {
                        alert(result.message);
                    }
                }
            });
        }
    };
    ko.applyBindings(viewmodel);

    $("#taggablePicture").tag();
</script>